<template>
	<view>
		<view class="steps-content">
			<view style="text-align: center;font-size: 18px;color: #333;">选择亲属关系，计算对应的称呼</view>
			<view class="step-bg">
				<view style="display: flex;align-items: center;width: 100%;flex-wrap: wrap;">
					<view>我</view>
					<view v-for="(item,index) in relationSteps" :key="index" style="display: flex;align-items: center;">
						<uni-icons type="arrow-right" color="#3b82f6" size="20"></uni-icons>
						<view class="step-text">{{item}}</view>
					</view>
				</view>

				<view v-if="relationSteps.length > 0" @click="clearLastStep" style="width: 100rpx;text-align: right;">
					<uni-icons type="arrow-left" size="20"></uni-icons>
				</view>
			</view>

			<view v-if="result" class="result-container">
				<view class="result-title">称呼结果:</view>
				<view class="result-value">{{result}}</view>
			</view>
		</view>


		<view class="grid-bg" :style="{'height':buttonsHeight + 'px'}">
			<view v-for="(item,index) in list" :key="index" class="item-bg"
				:class="[index==list.length-1?'clear-btn':index==list.length-2?'calculate-btn':'']"
				@click="handleRelation(item)">
				<image v-if="item=='爸爸'||item=='哥哥'||item=='弟弟'||item=='老公'||item=='儿子'" src="/static/man.png" class="item-image"></image>
				<image v-if="item=='妈妈'||item=='姐姐'||item=='妹妹'||item=='老婆'||item=='女儿'" src="/static/woman.png" class="item-image"></image>
				<view>{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'

	const buttonsHeight = ref(0)
	onReady(() => {
		const res = uni.getWindowInfo();
		// console.log('getWindowInfo',res)
		buttonsHeight.value = res.windowHeight - 250
	})

	const list = [
		"爸爸", "妈妈", "哥哥", "姐姐", "弟弟", "妹妹", "老公", "老婆", "儿子", "女儿", "计算", "清空"
	]
	const relationSteps = ref([])
	const result = ref()
	// 添加亲属关系
	function handleRelation(item) {
		if (item == '计算') {
			if(relationSteps.value.length > 0){
				calculateRelation()
				return
			}else{
				return
			}
		}
		if (item == '清空') {
			if(relationSteps.value.length > 0){
				clearAll()
				return
			}else{
				return
			}
		}
		if (relationSteps.value.length < 6) {
			relationSteps.value.push(item)
			result.value = ""
		}
	}

	// 清除最后一步
	function clearLastStep() {
		relationSteps.value.pop()
		result.value = ""
	}

	// 清空所有
	function clearAll() {
		relationSteps.value = []
		result.value = ''
	}

	// 计算亲属关系称呼
	function calculateRelation() {
		result.value = getRelationTitle()
	}

	// 核心关系计算逻辑
	function getRelationTitle() {
		const relationMap = {
			// 第一层关系
			'爸爸': '父亲',
			'妈妈': '母亲',
			'哥哥': '哥哥',
			'姐姐': '姐姐',
			'弟弟': '弟弟',
			'妹妹': '妹妹',
			'老公': '丈夫',
			'老婆': '妻子',
			'儿子': '儿子',
			'女儿': '女儿',

			// 第二层关系 - 爸爸相关
			'爸爸的爸爸': '祖父（爷爷）',
			'爸爸的妈妈': '祖母（奶奶）',
			'爸爸的哥哥': '伯父',
			'爸爸的姐姐': '姑妈',
			'爸爸的弟弟': '叔父',
			'爸爸的妹妹': '姑姑',
			'爸爸的儿子': '兄弟',
			'爸爸的女儿': '姐妹',

			// 第二层关系 - 妈妈相关
			'妈妈的爸爸': '外祖父',
			'妈妈的妈妈': '外祖母',
			'妈妈的哥哥': '舅父',
			'妈妈的姐姐': '姨妈',
			'妈妈的弟弟': '舅舅',
			'妈妈的妹妹': '姨母',
			'妈妈的儿子': '舅表兄弟',
			'妈妈的女儿': '舅表姐妹',

			// 第二层关系 - 兄弟姐妹相关
			'哥哥的爸爸': '父亲',
			'哥哥的妈妈': '母亲',
			'哥哥的儿子': '侄子',
			'哥哥的女儿': '侄女',
			'哥哥的老婆': '嫂子',
			'姐姐的爸爸': '父亲',
			'姐姐的妈妈': '母亲',
			'姐姐的儿子': '外甥',
			'姐姐的女儿': '外甥女',
			'姐姐的老公': '姐夫',
			'弟弟的儿子': '侄子',
			'弟弟的女儿': '侄女',
			'弟弟的老婆': '弟媳',
			'妹妹的儿子': '外甥',
			'妹妹的女儿': '外甥女',
			'妹妹的老公': '妹夫',

			// 第二层关系 - 配偶相关
			'老公的爸爸': '公公',
			'老公的妈妈': '婆婆',
			'老公的哥哥': '大伯哥',
			'老公的弟弟': '小叔子',
			'老公的姐姐': '大姑子',
			'老公的妹妹': '小姑子',
			'老婆的爸爸': '岳父',
			'老婆的妈妈': '岳母',
			'老婆的哥哥': '大舅子',
			'老婆的弟弟': '小舅子',
			'老婆的姐姐': '大姨子',
			'老婆的妹妹': '小姨子',

			// 第二层关系 - 子女相关
			'儿子的爸爸': '丈夫',
			'儿子的妈妈': '自己',
			'儿子的哥哥': '长子',
			'儿子的弟弟': '次子',
			'儿子的姐姐': '女儿',
			'儿子的妹妹': '女儿',
			'儿子的老婆': '儿媳',
			'女儿的爸爸': '丈夫',
			'女儿的妈妈': '自己',
			'女儿的哥哥': '儿子',
			'女儿的弟弟': '儿子',
			'女儿的姐姐': '长女',
			'女儿的妹妹': '次女',
			'女儿的老公': '女婿',

			// 第三层关系 - 祖父母的兄弟姐妹
			'爸爸的妈妈的哥哥': '舅祖父',
			'爸爸的妈妈的弟弟': '舅祖父',
			'爸爸的妈妈的姐姐': '姨祖母',
			'爸爸的妈妈的妹妹': '姨祖母',
			'爸爸的爸爸的哥哥': '伯祖父',
			'爸爸的爸爸的弟弟': '叔祖父',
			'爸爸的爸爸的姐姐': '姑祖母',
			'爸爸的爸爸的妹妹': '姑祖母',
			'妈妈的爸爸的哥哥': '伯外祖父',
			'妈妈的爸爸的弟弟': '叔外祖父',
			'妈妈的爸爸的姐姐': '姑外祖母',
			'妈妈的爸爸的妹妹': '姑外祖母',
			'妈妈的妈妈的哥哥': '舅外祖父',
			'妈妈的妈妈的弟弟': '舅外祖父',
			'妈妈的妈妈的姐姐': '姨外祖母',
			'妈妈的妈妈的妹妹': '姨外祖母',

			// 第三层关系 - 父母兄弟姐妹的配偶
			'爸爸的姐姐的老公': '姑父',
			'爸爸的妹妹的老公': '姑父',
			'爸爸的哥哥的老婆': '伯母',
			'爸爸的弟弟的老婆': '婶婶',
			'妈妈的哥哥的老婆': '舅母',
			'妈妈的弟弟的老婆': '舅母',
			'妈妈的姐姐的老公': '姨父',
			'妈妈的妹妹的老公': '姨父',

			// 第三层关系 - 表亲/堂亲
			'爸爸的姐姐的儿子': '姑表兄',
			'爸爸的姐姐的女儿': '姑表姐',
			'爸爸的妹妹的儿子': '姑表弟',
			'爸爸的妹妹的女儿': '姑表妹',
			'爸爸的哥哥的儿子': '堂兄',
			'爸爸的哥哥的女儿': '堂姐',
			'爸爸的弟弟的儿子': '堂弟',
			'爸爸的弟弟的女儿': '堂妹',
			'妈妈的哥哥的儿子': '舅表兄',
			'妈妈的哥哥的女儿': '舅表姐',
			'妈妈的弟弟的儿子': '舅表弟',
			'妈妈的弟弟的女儿': '舅表妹',
			'妈妈的姐姐的儿子': '姨表兄',
			'妈妈的姐姐的女儿': '姨表姐',
			'妈妈的妹妹的儿子': '姨表弟',
			'妈妈的妹妹的女儿': '姨表妹',

			// 第三层关系 - 配偶兄弟姐妹的配偶
			'老公的姐姐的老公': '大姑姐夫',
			'老公的妹妹的老公': '小姑夫',
			'老公的哥哥的老婆': '大伯嫂',
			'老婆的哥哥的老婆': '大舅嫂',
			'老婆的姐姐的老公': '大姨姐夫',

			// 第三层关系 - 子女相关扩展
			'儿子的女儿': '孙女',
			'儿子的儿子': '孙子',
			'女儿的儿子': '外孙',
			'女儿的女儿': '外孙女',
			'女儿的老公的爸爸': '亲家公',
			'女儿的老公的妈妈': '亲家母',

			// 第四层关系 - 多层关系扩展
			'爸爸的妈妈的哥哥的儿子': '表叔',
			'爸爸的妈妈的姐姐的女儿': '表姑',
			'妈妈的爸爸的弟弟的儿子': '表舅',
			'妈妈的妈妈的妹妹的女儿': '表姨',
			'老公的姐姐的儿子': '外甥',
			'老婆的弟弟的女儿': '外甥女',
			'女儿的儿子的儿子': '曾外孙',
			'女儿的女儿的女儿': '曾外孙女',
			'哥哥的女儿的儿子': '侄外孙',
			'姐姐的儿子的女儿': '外曾侄女',

			// 新增补充的关系（在v9基础上添加）
			'妈妈的妈妈的老公': '外祖父（姥爷）',
			'妈妈的爸爸的老婆': '外祖母（姥姥）',
			'爸爸的妈妈的老公': '祖父（爷爷）',
			'爸爸的爸爸的老婆': '祖母（奶奶）',
			'妈妈的爸爸的哥哥': '伯外祖父（伯姥爷）',
			'妈妈的爸爸的弟弟': '叔外祖父（叔姥爷）',
			'妈妈的妈妈的姐姐': '姨外祖母（姨姥姥）',
			'爸爸的妈妈的妹妹': '姨祖母（姨奶奶）'
		}
		const key = relationSteps.value.join('的');
		return relationMap[key] || `[${key}]的称呼暂不支持`;
	}
</script>

<style>
	@import "relative.css"
</style>